<template lang="html">
    <div id="IndentList" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中">
        <db-breadcrumb></db-breadcrumb>
        <div class="db-content-inner">
            <div class="filters">
                <div class="filter">
                    <el-input placeholder="订单号" v-model="filters.indentNum"></el-input>
                </div>
                <div class="filter">
                    <el-input placeholder="收货人" v-model="filters.linkman"></el-input>
                </div>
                <div class="filter">
                    <el-select placeholder="订单状态" v-model="filters.indentStatus" clearable>
                        <el-option v-for="item in indentStatusList" :label="item.text" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="filter">
                    <el-select placeholder="物流公司" v-model="filters.logistics" clearable>
                        <el-option v-for="item in logisticsList" :label="item.text" :value="item.value"></el-option>
                    </el-select>
                </div>
                <div class="filter">
                    <el-input placeholder="物流单号" v-model="filters.logisticsNum"></el-input>
                </div>
                <div class="filter">
                    <el-date-picker type="date" placeholder="开始订单日期" style="width:150px" v-model="filters.addDateS"></el-date-picker>
                </div>
                <div class="filter">
                    <el-date-picker type="date" placeholder="结束订单日期" style="width:150px" v-model="filters.addDateE"></el-date-picker>
                </div>
                <div class="filter">
                    <el-button type="primary" @click="handleSearch()">搜索</el-button>
                </div>
            </div>
            <el-table :data="tableData" ref="table" style="width: 100%" stripe border>
                <el-table-column prop="indentNum" label="订单号" width="120"></el-table-column>
                <el-table-column prop="userId" label="用户ID" width="90"></el-table-column>
                <el-table-column prop="linkman" label="收货人"></el-table-column>
                <el-table-column prop="linkmanPhone" label="联系电话"></el-table-column>
                <el-table-column prop="address" label="收货地址"></el-table-column>
                <el-table-column prop="totalPrice" label="总价"></el-table-column>
                <el-table-column prop="indentStatusName" label="订单状态"></el-table-column>
                <el-table-column prop="logisticsName" label="物流公司"></el-table-column>
                <el-table-column prop="logisticsNum" label="物流单号"></el-table-column>
                <el-table-column prop="source" label="渠道"></el-table-column>
                <el-table-column :context="_self" width="100" inline-template label="操作">
                    <div>
                        <el-button size="small" @click="handleEdit($index, row)">编辑</el-button>
                    </div>
                </el-table-column>
            </el-table>
            <div class="pagination-wrapper" v-show="!loading">
                <el-pagination layout="prev,pager,next,jumper,total" @current-change="handleCurrentChange" :current-page="filters.page" :total="total" :page-size="20">
                </el-pagination>
            </div>
        </div>
        <el-dialog title="订单详情" v-model="createDialog" size="large">
            <el-form ref="form" :model="form" label-width="80px">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>基础信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="订单号" prop="userIndent.indentNum">
                                <el-input v-model="form.userIndent.indentNum" :disabled="inputDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="总价" prop="userIndent.totalPrice">
                                <el-input v-model="form.userIndent.totalPrice" :disabled="inputDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6">
                            <el-form-item label="收货人" prop="userIndent.linkman">
                                <el-input v-model="form.userIndent.linkman" :disabled="inputDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6" :offset="1">
                            <el-form-item label="收货电话" prop="userIndent.linkmanPhone">
                                <el-input v-model="form.userIndent.linkmanPhone" :disabled="inputDisabled"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-form-item label="收货地址">
                            <el-row :gutter="10">
                                <el-col :span="3" style="padding-left: 0">
                                    <el-input v-model="form.userIndent.province" :disabled="inputDisabled"></el-input>
                                </el-col>
                                <el-col :span="3">
                                    <el-input v-model="form.userIndent.city" :disabled="inputDisabled"></el-input>
                                </el-col>
                                <el-col :span="3">
                                    <el-input v-model="form.userIndent.area" :disabled="inputDisabled"></el-input>
                                </el-col>
                                <el-col :span="12">
                                    <el-input v-model="form.userIndent.address" :disabled="inputDisabled"></el-input>
                                </el-col>
                            </el-row>
                        </el-form-item>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>商品信息</span>
                    </div>
                    <el-table :data="form.userIndent.userIndentProduct" style="width: 100%" stripe border>
                        <el-table-column prop="productName" label="商品"></el-table-column>
                        <el-table-column prop="payUnitPrice" label="单价" width="120"></el-table-column>
                        <el-table-column prop="payCount" label="购买数量" width="120"></el-table-column>
                        <el-table-column prop="payTotalPrice" label="总价" width="120"></el-table-column>
                    </el-table>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>订单状态</span>
                    </div>
                    <el-row :gutter="10">
                        <el-col :span="6">
                            <el-form-item label="订单状态" prop="userIndent.indentStatus">
                                <el-select v-model="form.userIndent.indentStatus">
                                    <el-option v-for="item in indentStatusList" :label="item.text" :value="item.value" :disabled="item.value != 2 && item.value != 3"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="快递公司" prop="userIndent.logistics">
                                <el-select v-model="form.userIndent.logistics" :disabled="form.userIndent.indentStatus != 3">
                                    <el-option v-for="item in logisticsList" :label="item.text" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="快递单号" prop="userIndent.logisticsNum">
                                <el-input v-model="form.userIndent.logisticsNum" :disabled="form.userIndent.indentStatus != 3"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-card>
            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button @click="createDialog = false">取 消</el-button>
                    <el-button type="primary" @click="handleSave()">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        getUserIndentList,
        getUserIndentDetail,
        updateUserIndent
    } from '../../api/api';
    
    export default {
        data() {
            return {
                filters: {
                    indentNum: '',
                    linkman: '',
                    addDateS: '',
                    addDateE: '',
                    logistics: '',
                    indentStatus: '',
                    logisticsNum: '',
                    page:1,
                    size:20
                },
                form: {
                    product: [],
                    userIndent: {
                        userIndentProduct: [],
                        indentStatus: 0
                    }
                },
                total:0,
                tableData: null,
                loading: false,
                createDialog: false,
                inputDisabled: true,
                indentStatusList: [{
                        text: '失效',
                        value: 0
                    },
                    {
                        text: '未支付',
                        value: 1
                    },
                    {
                        text: '已支付',
                        value: 2
                    },
                    {
                        text: '已发货',
                        value: 3
                    },
                    {
                        text: '已收货',
                        value: 4
                    },
                ],
                logisticsList: [{
                        text: '申通',
                        value: '1'
                    },
                    {
                        text: '顺丰',
                        value: '2'
                    },
                    {
                        text: '百世汇通',
                        value: '3'
                    }
                ],
                sourcesList: {
                    '1': '智能服务亭',
                    '2': '电动游览车',
                    '3': '第三方'
                }
            }
        },
        watch: {
            indentStatus(newVal) {
                if (newVal != 3) {
                    this.form.userIndent.logistics = '';
                    this.form.userIndent.logisticsNum = '';
                }
            }
        },
        methods: {
            handleSearch() {
                this.getGrid();
            },
            handleEdit(index, row) {
                this.loading = true;
                getUserIndentDetail(row.id).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.form = data;
                        this.createDialog = true;
                    }
                });
            },
            handleCurrentChange(val) {
                this.filters.page = val;
                this.getGrid();
            },
            handleSave() {
                var params = JSON.parse(JSON.stringify(this.form.userIndent));
                this.loading = true;
                updateUserIndent(params).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        this.$message({
                            type: 'success',
                            message: '提交成功'
                        });
                    }
                });
            },
            getGrid() {
                this.loading = true;
                var params = JSON.parse(JSON.stringify(this.filters));
                params.page = params.page - 1;

                getUserIndentList(params).then(result => {
                    this.loading = false;
                    let {
                        errorMsg,
                        sysCode,
                        data
                    } = result;
                    if (sysCode !== 1) {
                        this.$message.error(errorMsg);
                    } else {
                        data.content.forEach(v => {
                            v.address = v.province + v.city + v.area + v.address
                            v.source = v.storeName || this.sourcesList[v.location]
                        })
                        this.tableData = data.content;
                        this.filters.page =  data.number + 1;
                        this.total = data.totalElements;
                    }
                });
            }
        },
        computed: {
            indentStatus() {
                return this.form.userIndent.indentStatus;
            }
        },
        mounted() {
            this.getGrid();
        }
    }
</script>

<style lang="scss">
    #IndentList {
        .filters {
            margin: 0 0 20px 0;
            border: 1px #efefef solid;
            padding: 10px;
            background: #f9f9f9;
            .filter {
                display: inline-block;
                width: auto;
                padding: 10px;
                border-radius: 5px;
                .el-select {
                    display: inline-block;
                }
            }
            .el-input {
                width: 120px;
                display: inline-block;
            }
        }
        .pagination-wrapper {
            text-align: center;
            padding: 30px;
        }
        .box-card {
            margin-bottom: 20px;
        }
    }
</style>